<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>忘记密码</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
        body{
            background-image:url("../../images/login/forget.jpg");
            background-size:cover;
        }
        #wrapper{
            width: 1250px;
            height: 600px;
            margin: 0 auto;
        }
        #header{
            width: 100%;
            height: 100px;
        }
        #main{
            background-color: rgba(96,96,96,0.3);
            margin-left: 350px;
            margin-top: 50px;
            padding-top: 20px;
            width: 500px;
            height: 300px;
            border-radius: 10px;
            text-align: center;
        }
        #password{
            width: 250px;
            height: 30px;
        }
        #password1{
            width: 250px;
            height: 30px;
        }
        #button{
            background-color: dodgerblue;
            border-radius: 5px;
            border: none;
            width: 260px;
            height: 35px;
            color: aliceblue;
        }
        #eyes {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 222px;
            left: 700px;
        }
    </style>
</head>
<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="main">
        <form action="/change.do" method="post" onsubmit="return check()">
            <br><br>
            <input type="text" th:value="${mailname}" name="mailname" style="display:none" />
            <input type="password" id="password" name="password" placeholder="请输入密码: " onblur="conpas()" onclick="conpas1()"><br>
            <label><img src="../../images/login/1.png" alt="" id="eyes" onclick="oneyes()"></label><span id="conpas"></span><br>
            <input type="password" id="password1" name="password1" placeholder="确认密码:" onblur="confirm()" onclick="confirm1()"><br>
            <span id="confirm" th:text="${error}"></span><br><br>
            <input type="submit" value="下一步" id="button">
        </form>
    </div>
</div>
<script>
    var input = document.getElementById("password");
    var imgs = document.getElementById('eyes');
    var flag = 0;
    function oneyes() {
        if (flag == 0) {
            input.type = 'text';
            imgs.src = 'images/login/2.png';//睁眼图
            flag = 1;
        } else {
            input.type = 'password';
            imgs.src = 'images/login/1.png';//闭眼图
            flag = 0;
        }
    }
    function check() {
        var regu2 = /^(?=.*[a-zA-Z]+)(?=.*[0-9]+)[a-zA-Z0-9]+$/;//密码要包含字母，数字，不能有特殊符号
        var password = $("#password").val().replace(/\s+/g,"");//去掉空格
        if(password.length<6||!regu2.test(password)) {
            $("#confirm").text("密码应该大于六位且要包含字母和数字并且不能包含特殊字符");
            return false;
        }else return true;
    }
    function conpas() {
        if($("#password").val()=="") {
            $("#conpas").text("请输入您需要设置的密码");
            $('#test').attr("disabled",true);
        }else $("#conpas").text("");
    }
    function conpas1() {
        $("#conpas").text("");
    }
    function confirm() {
        if ($("#password1").val() == "") {
            document.getElementById('password1').style.border = '2px solid red';
            $("#confirm").text("请再次输入您的密码")
        }
    }
    function confirm1() {
        $("#confirm").text("")
    }
</script>
</body>
</html>